<template>
	<view class="box">
		<tito class="tito" title="提现" lefticon="left" @clickLeft="clickLeft" />
		<view class="statistics">
			<view class="number-motions">
				<view class="number">
					￥{{ nonPresentIncome }}
				</view>
				<view class="motions">
					可提现金额（元）
				</view>
			</view>
			<view class="image">
				<image src="../static/bg-yeda.png" mode=""></image>
			</view>
		</view>
		<view class="withdraw">
			<view class="tx">
				提现金额
			</view>
			<view class="input">
				<text style="font-size: 60rpx;">￥</text>
				<input class="inputs" v-model="money" type="text" placeholder="请输入"
					placeholder-style="font-size: 40rpx;" />
				<view class="text" @click="getAll">
					全部提现
				</view>
			</view>
			<view class="text-icon" @click="getdrawal">
				<view class="text">
					提现至
				</view>
				<view class="icon">
					{{ bank || bankCardData[0].bank || '去添加银行卡' }}
					<uni-icons type="right" size="15" color="#B5B6B6"></uni-icons>
				</view>
			</view>
		</view>
		<view class="bont" @click="withdrawal">
			申请提现
		</view>
		<uni-popup ref="popup" type="bottom" :safeArea="false">
			<view class="poputView">
				<view class="text-icon">
					<view class="text">
						选择提现银行卡
					</view>
					<view class="icon" @click="$refs.popup.close()">
						<uni-icons type="closeempty" size="30" color="#000"></uni-icons>
					</view>
				</view>
				<view class="block">
					<view class="yhblock">
						<view class="blockList" v-for="(item, index) in bankCardData" :key="item.id">
							<view class="text">
								{{ item.bank }}（{{ originalString(item.bankAccount) }}）
							</view>
							<view class="checkbox">
								<checkbox-group @change="handleCheckboxChange">
									<label class="default">
										<checkbox v-model="index" :checked="index == paymentId" color="#2590FA" />
									</label>
								</checkbox-group>
							</view>
						</view>
					</view>
					<view class="bolk-text" @click="getAddbank">
						<view class="image">
							<image src="../static/tjyhk.png" mode=""></image>
						</view>
						<view class="text">
							添加银行卡
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			paymentId: '0',
			nonPresentIncome: 0,
			money: "", //金额
			bankID: '',
			bankCardData: [],
			page: 1,
			limit: 10,
			bank: "",
		}
	},
	onLoad(ope) {
		if (ope.nonPresentIncome) {
			this.nonPresentIncome = ope.nonPresentIncome
		}
	},
	onShow() {
		this.bankCardList()
	},
	methods: {
		originalString(e) {
			return e.slice(-4)
		},
		//银行卡列表
		async bankCardList() {
			let data = {
				page: this.page,
				limit: this.limit
			}
			let res = await this.$request.get("/water-platform-app-api/customer/bankCard/list", data)
			if (res.data.length > 0) {
				this.bankCardData = res.data
				this.bankID = res.data[0].id
			}
		},
		//全部提现
		getAll() {
			this.money = this.nonPresentIncome
		},
		//发起提现
		async withdrawal() {
			if (this.money == 0) {
				return uni.showToast({
					title: "金额必须大于0",
					icon: "none"
				})
			}
			let data = {
				customerBankCardId: this.bankID,
				money: this.money
			}
			let res = await this.$request.get("/water-platform-app-api/customer/withdrawlRecord/save", data)
			if (res.code == 0) {
				uni.showToast({
					title: "请等待审核!",
					icon: "none"
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 2
					})
				}, 1500)
			}
		},
		clickLeft() {
			uni.navigateBack()
		},
		getdrawal() {
			this.$refs.popup.open('bottom')
		},
		handleCheckboxChange(event) {
			const checkedId = event.detail.value[0];
			this.paymentId = checkedId;
			const found = this.bankCardData.find((element, index) => index == this.paymentId);
			this.bank = found.bank
			this.bankID = found.id
		},
		//添加银行卡
		getAddbank() {
			this.$refs.popup.close()
			uni.navigateTo({
				url: "/subpackageA/pages/my/addBankCard"
			})
		}
	}
}
</script>

<style lang="scss">
.box {
	min-height: 100vh;
	background-color: #F3F5F6;
}

.statistics {
	height: 208rpx;
	background: linear-gradient(137deg, #25C5FA 0%, #2590FA 100%);
	border-radius: 16rpx;
	margin: 32rpx 30rpx 0rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	box-sizing: border-box;
	position: relative;

	.image {
		position: absolute;
		top: 2%;
		right: 62rpx;

		image {
			width: 220rpx;
			height: 220rpx;
		}
	}

	.number-motions {
		.number {
			font-weight: 600;
			font-size: 44rpx;
			color: #FFFFFF;
		}

		.motions {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

.withdraw {
	height: 336rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F1F2;
	border-radius: 0 0 16rpx 16rpx;
	margin: 0 30rpx;
	padding: 30rpx;
	box-sizing: border-box;

	.tx {
		font-size: 28rpx;
		color: #2E3033;
	}

	.input {
		height: 160rpx;
		border-bottom: 2rpx solid #F1F2F2;
		display: flex;
		align-items: center;

		.inputs {
			height: 100%;
			font-size: 80rpx;
			color: #14171A;
			flex: 1;
		}

		.text {
			margin-left: auto;
			font-size: 28rpx;
			color: #2590FA;
		}
	}

	.text-icon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;

		.text {
			font-size: 28rpx;
			color: #2E3033;
		}

		.icon {
			font-size: 28rpx;
			color: #14171A;
		}
	}
}

.bont {
	width: 690rpx;
	height: 88rpx;
	background: #2590FA;
	border-radius: 100rpx;
	font-size: 32rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 88rpx;
	position: fixed;
	bottom: 92rpx;
	left: 30rpx;
}

.poputView {
	height: 800rpx;
	background: #F4F5F6;
	border-radius: 32rpx 32rpx 0 0;

	.text-icon {
		display: flex;
		align-items: center;

		padding: 32rpx 30rpx;
		box-sizing: border-box;

		.text {
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.icon {
			margin-left: auto;
		}
	}

	.block {
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F1F2;
		border-radius: 16rpx;
		margin: 0 30rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.yhblock {
			height: 260rpx;
			overflow-y: auto;

			.blockList:first-child {
				margin-top: 0rpx;
			}

			.blockList {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 72rpx;
				border-bottom: 2rpx solid #F1F2F2;
				margin-top: 24rpx;

				.default {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #2590FA;
				}
			}
		}
	}

	.bolk-text {
		display: flex;
		align-items: center;
		margin-top: 28rpx;

		.image {
			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}
		}

		.text {
			font-size: 28rpx;
			color: #14171A;
			margin-left: 24rpx;
		}
	}
}
</style>